// 获得所有导航栏 <a> 标签
const guideGuideAList = document.querySelectorAll(".guide li");
// 获得滑块
const guideSlider = document.querySelector(".guide .slider");
// 获取背景
const guideBack = document.querySelector(".guide .back");

// 现在的页数
var nowPage = 0;

// 滑块位置更新
function updataLocal(index) {
    // 获取背景宽度
    // @ts-ignore
    let backWide = parseInt(window.getComputedStyle(guideBack).width);
    // 获取滑块宽度
    // @ts-ignore
    let sliderWide = parseInt(window.getComputedStyle(guideSlider).width);
    // 获得开始位置
    let startPosition = backWide * 0.125 - sliderWide * 0.5;
    // 计算滑块位置
    let sliderPosition = startPosition + index * backWide * 0.25;
    // @ts-ignore
    guideSlider.style.left = String(sliderPosition) + "px";
}

// 初始化位置
setTimeout(() => {
    // @ts-ignore
    guideSlider.style.transition = "none";
    updataLocal(nowPage)
}, 200);

// 添加滑块移动监视器
function addSliderMove() {
    // 点击时移动
    guideGuideAList.forEach((guideA, index) => {
        // 添加监视器
        guideA.addEventListener("click", () => {
            // @ts-ignore
            guideSlider.style.transition = "all ease 0.3s";
            updataLocal(index);
        });
    });

    // 屏幕大小变化时移动
    window.addEventListener("resize", () => {
        // @ts-ignore
        guideSlider.style.transition = "none";
        setTimeout(() => {
            updataLocal(nowPage);
        }, 170);
    });
}
addSliderMove();

// 添加高亮监视器
function addAHover() {
    // @ts-ignore
    guideGuideAList[nowPage].style.filter = "brightness(100)";
    guideGuideAList.forEach((guideA, index) => {
        // 添加监视器
        guideA.addEventListener("click", () => {
            if(nowPage === index) return;
            // @ts-ignore
            guideGuideAList[nowPage].style.filter = "none";
            setTimeout(() => {
                nowPage = index;
                // @ts-ignore
                guideGuideAList[index].style.filter = "brightness(100)";
            }, 170)
        });
    });
}
addAHover();